<template>
  <div>
    <!-- 用户列表 -->

    <el-card shadow="never" class="margin-30" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>注册用户列表</span>
      </div>
      <!-- card body -->
      <el-table
        v-loading="loading"
        :data="userList"
        border
        stripe
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          label="#"
          type="index"
          width="50"
          align="center"
          fixed="left"
        />
        <el-table-column
          prop="username"
          label="用户名"
          width="150"
          align="center"
        />
        <el-table-column
          label="头像"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px; border-radius: 50%;" :src="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称"
          width="150"
          align="center"
        />
        <el-table-column
          prop="realname"
          label="真实姓名"
          width="150"
          align="center"
        />
        <el-table-column
          label="性别"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.sex===1">男</el-tag>
            <el-tag v-if="scope.row.sex===0">女</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          align="center"
        />
        <el-table-column
          prop="email"
          label="邮箱"
          width="150"
          align="center"
        />
        <el-table-column
          prop="birthday"
          label="生日"
          width="150"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="注册时间"
          width="150"
          fixed="right"
          align="center"
        />
      </el-table>

      <div class="block">
        <el-pagination
          style="margin-top: 10px; text-align: center;"
          :current-page="start"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="limit"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

  </div>
</template>

<script>
import mix from '@/mixins'
import { findMembersByPage } from '@/api/userList'
export default {
  name: 'UserList',
  mixins: [mix],
  data() {
    return {
      userList: [],
      loading: true
    }
  },

  created() {
    this.getUserList()
  },

  mounted() {

  },

  methods: {
    async getUserList() {
      this.loading = true
      const res = await findMembersByPage(this.start, this.limit)
      console.log(res)
      const { success, data: { rows, total }} = res
      if (success) {
        this.loading = false
        this.userList = rows
        this.total = total
      }
    },
    // 分页
    handleSizeChange(val) {
      this.limit = val
      this.start = 1
      this.getUserList()
    },
    handleCurrentChange(val) {
      this.start = val
      this.getUserList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
